<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    var map;
    function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }

    function addRandomPins(num) {
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();

        var start = new Date().getTime();

        for (i = 0; i < num; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                map: map
            });
        }

        var end = new Date().getTime();
        var time = end - start;
        document.getElementById("results").value += '\nExecution time: ' + time;
    }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:600px;"></div>
  <p><input type="text" id="numpins" value="100" /><input type="button" value="add pins" onclick="addRandomPins(document.getElementById('numpins').value)" /></p>
  <textarea id="results" cols="50" rows="10"></textarea>
</body>
</html>